<template>
	<view class="container">
		<view style="
		 background: linear-gradient(to bottom,#4A9BFF 0%,#3988FD 50%, #1262E4 100%);
		height: 194px;
		padding-top: 10px;
		padding-left: 10px;">
			<uni-icons type="left" size="20" color="#fff" @click="goToBack"></uni-icons>
			<text style="color: #fff; font-size: 16px;font-weight: bold; margin-left: 140px;">注册</text>
		</view>
		<view class="content-top">
			<uni-forms ref="valiForm"  :modelValue="valiFormData" label-width="90px">
				<uni-forms-item label="负责人:" name="director">
					<uni-easyinput v-model="valiFormData.director" placeholder="请输入负责人姓名" />
				</uni-forms-item>

				<uni-forms-item label="身份证号码:" name="idCard ">
					<uni-easyinput v-model="valiFormData.idCard" placeholder="请输入身份证号码" />
				</uni-forms-item>

				<uni-forms-item label="手机号:" name="mobile">
					<uni-easyinput v-model="valiFormData.mobile" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="验证码:" name="code" style="position: relative; ">
					<uni-easyinput v-model="valiFormData.code" placeholder="请输入验证码" style="width: 100%;" />
					<button type="primary" @click="getYZM" size="mini"
						style="position: absolute; top: 0; right: 0; border-radius: 20px; background-color: #1564E6; margin-top: 3px;">
						获取验证码
					</button>
				</uni-forms-item>
				<uni-forms-item label="店名:" name="storeName">
					<uni-easyinput v-model="valiFormData.storeName" placeholder="请输入店名" />
				</uni-forms-item>

				<uni-forms-item label="工商营业执照号码:" name="businessLicenseId">
					<uni-easyinput v-model="valiFormData.businessLicenseId" placeholder="请输入营业执照号码" />
				</uni-forms-item>

				<uni-forms-item label="经营区域:" name="region">
					<uni-data-select v-model="valiFormData.region" placeholder="请选择区域" :localdata="region"
						@change="onOperatingAreaChange" :clear="false"></uni-data-select>
				</uni-forms-item>

				<uni-forms-item label="地址:" name="address">
					<uni-easyinput v-model="valiFormData.address" placeholder="请输入详细地址" />
				</uni-forms-item>
			</uni-forms>


		</view>
		<view class="content-bottom">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData" label-width="90px" label-position="top">
				<uni-forms-item label="商家简介:" name="businessProfile">
					<uni-easyinput v-model="valiFormData.businessProfile" placeholder="请准确介绍一下您的门店的情况"
						class="custom-textarea" type="textarea" :maxlength="300" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="content-bottom">
			<text>身份证正反面照片：</text>
			<view class="upload-container">
				<l-upload  @complete="uploadSFa" @remove="RemoveSFa">上传图片</l-upload>
			</view>
			<!-- 上传身份证反面 -->
			<view class="upload-container">
				<l-upload @complete="uploadSFb" @remove="RemoveSFb">上传图片</l-upload>
			</view>
		</view>
		<view class="content-bottom">
			<text>营业执照：</text>
			<view class="upload-container">
				<l-upload  @complete="uploadYY" @remove="RemoveYY">上传图片</l-upload>
			</view>
		</view>
		<view class="content-bottom">
			<text>门店照片：</text>
			<view class="upload-container">
				<l-upload @complete="upload" @remove="Remove">上传图片</l-upload>
			</view>
		</view>
		<button type="primary" @click="submit('valiForm')"
			style="border-radius: 20px; background-color: #1564E6; margin-top: 15px; width: 320px;">注册</button>
		<view style="height: 50px;">
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				fileUrl: '', // 用于保存文件地址
				value: 0,
				region: [{
						value: 0,
						text: "工商银行"
					},
					{
						value: 1,
						text: "农业银行"
					}
				],
				// 校验表单数据
				valiFormData: {
					director: '',//负责人
					idCard: '',
					mobile: '',
					code: '',
					storeName: '',
					businessLicenseId: '',
					region: '',
					address: '',
					businessProfile: '',
					front: '',
					opposite: '',
					businessLicenseImg: '',
					storeImage: [],
				},

				// 校验规则
			// 	rules: {
			// 		name: {
			// 			rules: [{
			// 				required: true,
			// 				errorMessage: '负责人不能为空'
			// 			}]
			// 		},
			// 		idNumber: {
			// 			rules: [{
			// 				required: true,
			// 				errorMessage: '身份证号码不能为空'
			// 			}]
			// 		},
			// 		phoneNumber: {
			// 			rules: [{
			// 				required: true,
			// 				errorMessage: '手机号码不能为空'
			// 			}]
			// 		},
			// 		idNumber: {
			// 			rules: [{
			// 				required: true,
			// 				errorMessage: '身份证号码不能为空'
			// 			}]
			// 		},
			// 		verificationCode: {
			// 			rules: [{
			// 				required: true,
			// 				errorMessage: '请填写验证码'
			// 			}]
			// 		},
			// 		storeName: {
			// 			rules: [{
			// 				required: true,
			// 				errorMessage: '店名不能为空'
			// 			}]
			// 		},
			// 		businessLicenseImg: {
			// 			rules: [{
			// 				required: true,
			// 				errorMessage: '身份证号码不能为空'
			// 			}]
			// 		},

			// 	}
			
			}
		},
		mounted() {
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				}
			});
		},
		methods: {
			//上传营业执照回调函数。   
			uploadYY(resp) {
				this.valiFormData.businessLicenseImg=resp.imageArr
				console.log("11"+resp.imageArr)
			},
			//图片移除回调
			RemoveYY(resp) {
				this.valiFormData.businessLicenseImg=resp.imageArr
				console.log(resp.imageArr)
			},
			//上传身份证1回调函数。
			uploadSFa(resp) {
				this.valiFormData.front=resp.imageArr
				console.log("11"+resp.imageArr)
			},
			//图片移除回调
			RemoveSFa(resp) {
				this.valiFormData.front=resp.imageArr
				console.log(resp.imageArr)
			},
			//上传身份证1回调函数。
			uploadSFb(resp) {
				this.valiFormData.opposite=resp.imageArr
				console.log('this.valiFormData.opposite',this.valiFormData.opposite)
				console.log("11"+resp.imageArr)
			},
			//图片移除回调
			RemoveSFb(resp) {
				this.valiFormData.opposite=resp.imageArr
				console.log('this.valiFormData.opposite',this.valiFormData.opposite)
				console.log(resp.imageArr)
			},


			getYZM() {
				if (this.isCounting) return; // 如果正在倒计时，不处理点击事件
			
				this.isCounting = true;
				this.countdown = 60;
			
				const interval = setInterval(() => {
					this.countdown -= 1;
					if (this.countdown <= 0) {
						clearInterval(interval);
						this.isCounting = false;
					}
				}, 1000);
			
				console.log('获取验证码中...');
				console.log(this.phone)
				uni.request({
				    url: 'http://localhost:9207/user/getCode', // 请求的 URL
				    method: 'GET', // 请求方法
				    data: {
				        phone: this.phone
				    }, // 请求体，传递的数据
				    success: (res) => {
				        console.log('请求成功:', res.data);
				    },
				    fail: (err) => {
				        console.error('请求失败:', err);
				    }
				});
			},
			goToBack() {
				uni.navigateBack()
			},
			onOperatingAreaChange(e) {
				this.valiFormData.region = e.detail.value;
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					});
					// 提交数据
					console.log('提交数据:', this.valiFormData);
					uni.request({
						url: 'http://localhost:9206/shopVerification', // 请求的 URL
						method: 'POST', // 请求方法
						data: {
						    director: this.valiFormData.director,
						    idCard: this.valiFormData.idCard,
						    mobile: this.valiFormData.mobile,
						    front: this.valiFormData.front[0],
							businessLicenseId:this.valiFormData.businessLicenseId,
						    opposite: this.valiFormData.opposite[0],
						    businessLicenseImg: this.valiFormData.businessLicenseImg[0]
						}, // 请求体，传递的数据
						success: (res) => {
						    console.log('请求成功:', res.data);
						},
						fail: (err) => {
						    console.error('请求失败:', err);
						}
					})
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}).catch(err => {
					console.log('err', err);
				});
			}
		}
	}
</script>

<style lang="scss">
	.custom-textarea {
		resize: vertical;
		/* 允许用户调整文本框高度 */
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.container {
		background-color: #e9e9eb;
	}

	.top {
		background-color: #2979ff;
		height: 150px;
	}

	.content-top {
		height: 450px;
		background-color: #fff;
		margin: -130px 10px 0; //上，左右，下
		border-radius: 15px;
		padding: 14px 10px;
	}


	.content-bottom {
		padding: 14px 10px;
		background-color: #fff;
		margin: 10px 10px 0;
		border-radius: 15px;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		gap: 10px;

	}

	.file-picker {
		position: relative;

	}

	.upload-text {
		position: absolute;

		padding: 5px;
		pointer-events: none;
		display: flex;
		flex-direction: column;

	}

	.up-text {
		font-size: 14px;
		color: #888;
		text-align: center;
		margin-top: 8px;
	}

	.upload-icon {
		width: 24px;
		height: 24px;
		margin-bottom: 8px;
		margin-left: 20px;
	}


	.tips {
		font-size: 14px;
		color: #FF6433;
		font-weight: bold;
		display: block;
	}

	.tip-status {
		display: block;
		font-size: 12px;
		/* 可以根据需要调整字体大小 */
		color: #999999;
		/* 设置不同的颜色以区分状态 */
		text-align: right;
	}
</style>